<template>
	<navigator class="video_item" url="/pages/video/show">
		<view class="image-view">
			<image class="video-image" :src="item.img"></image>
			<view class="seller_info">
				<view class="seller_logo"><img :src="item.seller_logo"></view>
				<view class="seller_name">{{item.seller_name}}</view>
			</view>
			<view class="top_title">
				<text class="title">{{item.title}}</text>
				<view class="top_click">
					<view class="is_top" v-if="item.is_top != 1">推荐</view>
					<view class="click">{{item.click}} 人观看</view>
				</view>
			</view>
		</view>
	</navigator>
</template>

<style lang="scss">
.video_item { 
	width:355upx; height:355upx; border:5upx solid #ffffff; float:left; position:relative; background:#000000; overflow:hidden;
	.video-image { width:100%; height:355upx; opacity:.8; }
	.seller_info {
		width:100%; height:90upx; position:absolute; left:0px; top:0px; padding:20upx;
		
		.seller_logo {
			width:60upx; height:60upx; border-radius:60upx; overflow:hidden; text-align:center; display:flex; justify-content:center; float:left;
			img { width:auto; height:60upx; }
		}
		.seller_name { height:60upx; line-height:60upx; color:$bgcolor_white; display:block; float:left; padding-left:15upx; font-size:$font-sm; }
	}
	.top_title {
		width:100%; height:110upx; position:absolute; left:0px; bottom:0px; padding:0 20upx;
		.title { width:100%; height:30upx; font-size:$font-sm; color:$bgcolor_white; }
		.top_click {
			width:100%; height:70upx;
			
			.is_top { height:40upx; line-height:40upx; background:$vui_bgcolor; color:$bgcolor_white; font-size:$font-sm; margin-right:15upx; padding:0upx 10upx; border-radius:5upx; display:block; float:left; }
			.click { height:40upx; line-height:40upx; display:block; float:left; color:$bgcolor_white; font-size:$font-sm; }
		}
	}
}

</style>
<script>
export default {
	data() {
		return {

		}
	},
	props:['item'],
	methods: {

	},
}
</script>